<script setup>

import {computed, onBeforeMount, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {acceptInvite, getInviteInfoByRoomId} from "@/api/together/together.js";
import {ElMessage} from "element-plus";
import {useStore} from "@/stores/store.js";
const route = useRoute()
const router = useRouter()

// 邀请信息
const inviteInfo = ref({
  cover: '',
  musician: '',
  avatar: '',
  username: '',
  musicName: '',
  isUnValid: false
})
onMounted(() => {
  const roomId = atob(route.params.id);
  // 请求一下该邀请信息
  getInviteInfoByRoomId(roomId).then((res) => {
    inviteInfo.value = res.data
    inviteInfo.value.isUnValid = false
  })
})

const accept = () => {
  const roomId = atob(route.params.id);
  const inviteeAccount = localStorage.getItem('account')
  acceptInvite(roomId, inviteeAccount).then((res) => {
    ElMessage.success(res.message)
    useStore().togetherRoomInfo.togetherRoomId = roomId
    router.push('/together')
  })
}
const cssStyle = computed(() => ({
  backgroundImage: `url(${inviteInfo.value.cover})`
}))
</script>

<template>

  <div class="container">
    <div v-if="!inviteInfo.isUnValid" class="masker"></div>
    <div v-if="!inviteInfo.isUnValid" :style="cssStyle" class="player"></div>
    <div style="background: #1a1a1a;" v-if="inviteInfo.isUnValid" class="main">
      <img style="border-radius: 50%" width="60" height="60" :src="inviteInfo.avatar">
      <p style="margin: 10px 0">{{ inviteInfo.username }} 刚刚邀请过你</p>
      <p style="font-size: 18px;font-weight: bold">邀请已失效，原因可能是链接过期、房间满员、房间关闭</p>
    </div>
    <div v-else class="main">
      <img style="border-radius: 50%" width="60" height="60" :src="inviteInfo.avatar">
      <p style="margin-top: 5px">{{ inviteInfo.username }}</p>
      <h3> 邀请你一起听 </h3>

      <img style="margin-top: 80px;border-radius: 20px" width="200" :src="inviteInfo.cover">

      <p> <span style="max-width: 180px">{{ inviteInfo.musicName }}</span><span>-</span><span style="max-width: 110px">{{ inviteInfo.username }}</span></p>

      <div @click="accept" class="btn-join">立即加入一起听</div>

    </div>

  </div>
</template>

<style scoped>
* {
  font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;
}
.btn-join {
  background: white;
  color: black;
  display: block;
  width: 228px;
  height: 47px;
  line-height: 47px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin: auto 20px 0;
  cursor: pointer;
}
p > span {
  display: inline-block;
  margin: 15px 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  font-family: "微软雅黑 Light",serif;
}
.main {
  position: absolute;
  z-index: 4;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100vw;
  height: 100vh;
  padding: calc(50vh - 365px) 0;


  box-sizing: border-box;
}
.container {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.masker {
  background-color: rgba(0, 0, 0, 0.68);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}
.player {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  filter: blur(40px);
  scale: 1.3;
  transform: translateZ(0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}
</style>
